<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="shortcut icon" href="../../images/favicon.png">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>还款管理</title>
    <style type="text/css">
        ::-webkit-scrollbar {
            width: 6px; /*滚动条的宽度*/
            height: 10px; /*滚动条的高度*/
        }

        ::-webkit-scrollbar-track {
            background-color: rgba(255, 255, 255, 0);
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0);
            transition: background-color .3s;
        }

        ::-webkit-scrollbar-thumb:hover {
            width: 5px;
            background-color: rgba(200, 200, 200, 0.88);
            -webkit-border-radius: 5px;
            transition: background-color .3s;
        }
    </style>
</head>

<body>
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            Forms
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Forms</a></li>
                <li class="breadcrumb-item active" aria-current="page">Basic elements</li>
            </ol>
        </nav>
    </div>
    <div id="app" class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <el-form :inline="true" :model="search" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="search.loanId" placeholder="报告编号" style="width:100px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search.name" placeholder="姓名" style="width:120px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search.inspectionLevel" placeholder="处理意见" style="width:110px">
                                <el-option label="正常贷款" value="1"></el-option>
                                <el-option label="关注贷款" value="2"></el-option>
                                <el-option label="次级贷款" value="3"></el-option>
                                <el-option label="可疑贷款" value="4"></el-option>
                                <el-option label="损失贷款" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-date-picker v-model="search.dateRange" type="daterange" range-separator="-"
                                        style="width:220px"
                                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
                            <el-button type="info" icon="el-icon-refresh" @click="handleReset()">重置</el-button>
                            <el-button type="success" icon="el-icon-circle-plus" @click="onAdd()">新增</el-button>
                        </el-form-item>
                    </el-form>
                    <template>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column prop="reportId" label="报告编号" width="100" align="center"></el-table-column>
                            <el-table-column prop="commonLoanInfo.loanId" label="借款编号" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.userName" label="姓名" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.contractAmount" label="合同金额" width="80"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.borrowingPeriod" label="借款期限" width="80"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.loanType" label="贷款类型" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.repaymentType" label="还款方式" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="checkDate" label="贷后检查时间" width="120" align="center">
                            </el-table-column>
                            <el-table-column label="检查方式" width="90" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.checkMethod===1">电话检查</span>
                                    <span v-if="scope.row.checkMethod===2">实地检查</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="检查原因" width="90" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.checkReason===1">首次检查</span>
                                    <span v-if="scope.row.checkReason===2">日常检查</span>
                                    <span v-if="scope.row.checkReason===3">逾期检查</span>
                                    <span v-if="scope.row.checkReason===4">其它</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="贷后处理意见" width="120" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.inspectionLevel===1">正常贷款</span>
                                    <span v-if="scope.row.inspectionLevel===2">关注贷款</span>
                                    <span v-if="scope.row.inspectionLevel===3">次级贷款</span>
                                    <span v-if="scope.row.inspectionLevel===4">可疑贷款</span>
                                    <span v-if="scope.row.inspectionLevel===5">损失贷款</span>
                                    <span v-if="scope.row.inspectionLevel===6">状况正常</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="specificRecommendations" label="贷后建议" width="180" align="center">
                            </el-table-column>
                        </el-table>
                        <br/>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </template>
                    <el-dialog title="新增贷后检查" :visible.sync="dialogVisible" width="50%">
                        <el-form ref="commitContain" :model="commitContain">
                            <el-form-item label="贷款编号:">
                                <el-autocomplete v-model="commitContain.user" :fetch-suggestions="querySearchAsync"
                                                 placeholder="可输入贷款编号或贷款人查找"
                                                 @select="handleSelect" style="width:300px">
                                </el-autocomplete>
                            </el-form-item>
                            <el-col :span="6">
                                <el-form-item label="贷款人姓名:">
                                    {{simpleLoanInfo[0].userName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="贷款期限:">
                                    {{simpleLoanInfo[0].loanTime}}
                                </el-form-item>
                            </el-col>
                            <el-form-item label="贷款金额:">
                                {{simpleLoanInfo[0].loanMoney}}
                            </el-form-item>
                            <el-form-item label="检查方式:">
                                <el-radio-group v-model="commitContain.checkMethod" size="medium">
                                    <el-radio-button label="1">电话检查</el-radio-button>
                                    <el-radio-button label="2">实地检查</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="检查原因:">
                                <el-radio-group v-model="commitContain.checkReason" size="medium">
                                    <el-radio-button label="1">首次检查</el-radio-button>
                                    <el-radio-button label="2">日常检查</el-radio-button>
                                    <el-radio-button label="3">逾期检查</el-radio-button>
                                    <el-radio-button label="4">其它</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="检查内容:">
                                <el-input type="textarea" placeholder="请输入内容"
                                          v-model="commitContain.specificRecommendations"
                                          maxlength="400"
                                          style="width:500px" rows="6" show-word-limit>
                                </el-input>
                            </el-form-item>
                            <br/>
                            <h4 class="card-title">贷后处理意见</h4>
                            <el-form-item label="五级分类选择:">
                                <el-radio-group v-model="commitContain.inspectionLevel" size="small">
                                    <el-radio-button label="1">正常贷款</el-radio-button>
                                    <el-radio-button label="2">关注贷款</el-radio-button>
                                    <el-radio-button label="3">次级贷款</el-radio-button>
                                    <el-radio-button label="4">可疑贷款</el-radio-button>
                                    <el-radio-button label="5">损失贷款</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <br/><br/>
                            <el-form-item>
                                <el-button type="success" icon="el-icon-s-promotion" @click="handleCommit()">提交
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<script src="../../js/file-upload.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var insM = new Vue({
        el: '#app',
        data: {
            search: {loanId: '', name: '', contractNo: '', inspectionLevel: '', dateRange: ''},
            currentPage: 1, //初始页
            pageSize: 5,    //每页的数据
            totalSize: 0,
            dialogVisible: false,
            commitContain: {
                loanId: '',
                user: '',
                checkMethod: '1',
                checkReason: '1',
                specificRecommendations: '',
                inspectionLevel: '1'
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            tableData: [],
            inspectionDealInfo: [],
            simpleLoanInfo: [{
                loanId: 0,
                userName: '',
                loanTime: 0,
                loanMoney: 0,
                restLoanMoney: 0,
                value: '',
            }],
            optionalList: [],
            timeout: null
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                var cp = String(this.currentPage);
                var ps = String(this.pageSize);
                var q = this.search;
                this.axiosMessage(cp, ps, q)
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                insM.$data.currentPage = 1;
                insM.$data.pageSize = size;
                this.fetchData()
            },
            handleCurrentChange: function (currentPage) {
                this.$data.currentPage = currentPage;
                this.fetchData()
            },
            handleReRecord(loanId) {
                window.location.href = 'http://localhost:8004/prepayment/check/' + loanId
            },
            onSubmit() {
                insM.$data.currentPage = 1;
                this.fetchData()
            }, onAdd() {
                insM.$data.simpleLoanInfo = [{loanId: 0, userName: '', loanTime: 0, loanMoney: 0, restLoanMoney: 0, value: '',}];
                insM.$data.commitContain.loanId = '';
                insM.$data.commitContain.user = '';
                insM.$data.commitContain.checkMethod = '1';
                insM.$data.commitContain.checkReason = '1';
                insM.$data.commitContain.specificRecommendations = '';
                insM.$data.commitContain.inspectionLevel = '1';
                axios.get('http://localhost:8004/inspection/getAllSimpleLoanMessage').then(function (response) {
                    insM.$data.optionalList = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
                insM.$data.dialogVisible = true
            }, axiosMessage(cp, ps, q) {
                if (q.dateRange === '') {
                    q.dateRange = null
                }
                axios.post(('http://localhost:8004/inspection/list/' + cp + '/' + ps), q).then(function (response) {
                    insM.$data.tableData = response.data.rows;
                    insM.$data.totalSize = response.data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            }, handleCommit() {
                axios.post(('http://localhost:8004/inspection/commitNormal'), insM.$data.commitContain).then(function (response) {
                    if (response.data === 1) {
                        insM.$notify({title: '成功', message: '新增贷后检查成功', type: 'success'});
                    } else {
                        insM.$notify.error({title: '错误', message: '新增贷后检查出现异常'});
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                insM.$data.dialogVisible = false;
                this.handleReset();
            }, handleReset() {
                insM.$data.search.loanId = '';
                insM.$data.search.name = '';
                insM.$data.search.contractNo = '';
                insM.$data.search.inspectionLevel = '';
                insM.$data.search.dateRange = '';
                this.onSubmit();
            }, querySearchAsync(queryString, cb) {
                var optionalList = insM.$data.optionalList;
                var results = this.detectiveMatchRange(optionalList, queryString);
                clearTimeout(insM.$data.timeout);
                insM.$data.timeout = setTimeout(() => {
                    cb(results);
                }, 0);
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                insM.$data.commitContain.loanId = item.loanId;
                axios.post(('http://localhost:8004/inspection/getTheSimpleLoanMessage'), insM.$data.commitContain).then(function (response) {
                    insM.$data.simpleLoanInfo = response.data
                }).catch(function (error) {
                    console.log(error);
                });
            }, detectiveMatchRange(resList, matchString) {
                // 创建副本
                var copyList = resList.slice();
                if (matchString === '' || matchString === null) {
                    return copyList
                } else {
                    for (theIndex in copyList) {
                        if (copyList[theIndex].value.match(matchString)) {
                        } else {
                            copyList[theIndex] = null
                        }
                    }
                    return copyList.filter(d => d);
                }
            }
        }
    });
</script>

</html>